<template>
    <div class="container-fluid">
        <TopBar></TopBar>
        <div class="box">
            <!-- 对话框 -->
            <div class="chat-box" id="dialogBox">
                <!-- 对话前提示 -->
                <div v-if="aiAnswer.messages.length === 0" class="card" style="width: 18rem;margin:auto">
                    <img src="../assets/icons/ai.svg" class="card-img-top" alt="开始聊天吧">
                    <div class="card-body">
                        <h5 class="card-title">Let's Start</h5>
                        <p class="card-text">本对话接入了阿里云通义千问大模型Api，请求从我的服务器发起，响应会慢一些</p>
                        <div class="btn btn-primary">对话模式已经设置为记忆模式</div>
                    </div>
                </div>
                <!--遍历对话-->
                <div v-for="message in aiAnswer.messages" style="margin-top: 10px;">
                    <!-- ai -->
                    <div v-if="message.role === 'assistant'" style="display: flex;">
                        <div style="width: 45px;height:40px">
                            <img src="../assets/icons/ai.svg" style="width: 40px;">

                        </div>
                        <div style="width: 90%;">
                            <div v-show="wait_show"><img src="../assets/icons/wait.svg" style="width: 30px;"> </div>
                            <div v-show="!wait_show" class="text-box">
                                <span>
                                    {{ message.content }}

                                </span>
                            </div>

                        </div>

                    </div>

                    <!-- people -->
                    <div v-if="message.role === 'user'" style="display: flex;flex-direction: row;
                justify-content: flex-end;">
                        <div style="width: 90%;">
                            <div class="text-box">
                                <span>
                                    {{ message.content }}
                                </span>
                            </div>
                        </div>
                        <div style="width: 45px;height:40px">
                            <img src="../assets/icons/favsion.png" style="width: 50px;">

                        </div>
                    </div>

                </div>
            </div>
            <!-- 输入框 -->
            <div>
                <br>
                <br>
                <div class="input-group mb-3">
                    <input type="text" v-model="question" class="form-control" placeholder="请输入你的问题"
                        aria-label="Recipient's username" aria-describedby="button-addon2">
                    <button @click="requeatAi()" class="btn btn-primary" type="button" id="button-addon2">发送</button>
                </div>
            </div>
            <br>
            <br>
            <button @click="delMessages()" class="btn btn-danger" type="button" >清空对话</button>

        </div>
        <br>
        <br><br>
        <br><br>
        <BottomBar></BottomBar>
    </div>
</template>
<script setup lang="ts">
import { ref } from "vue"


import { AiStore } from "@/store/Ai_dashscope"
const wait_show = ref(false)
const question: any = ref()
const aiAnswer = AiStore()
//请求对话
function requeatAi() {
    let msg = question.value
    aiAnswer.messages.push({
        role: "user",
        content: msg
    })
    aiAnswer.getAiAnswer()
    question.value = ''

}
//删除对话
function delMessages() {
    aiAnswer.messages = []
}

</script>
<style lang="scss" scoped>
.container-fluid {
    background-color: $passlink-bg-color;
    .box {
       
        width: $passlink-center-width;
        background-color: $passlink-bg-color;
        height: auto;
        margin: auto;

        .chat-box {
            width: 100%;
            color: $passlink-font-color-white;
            font-weight: normal;
            font-size: $passlink-font-size16;
            word-wrap: normal;
            height: 600px;
            padding: 20px;
            overflow: auto;

            p {
                font-weight: lighter;
                font-size: $passlink-font-size14;
            }

            .text-box {
                padding: 10px;
                color: $passlink-font-color-black;
                border-radius: 10px;
                background-color: $passlink-font-color-white;
                word-spacing: 2em;
            }

        }
    }




}
</style>
